<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:costa="http://stdio.costa/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/WEB-INF/layout/template.xhtml">
	<ui:define name="content">
		<h:form id="purchaseForm" prependId="false">
			<h:panelGrid columns="3" columnClasses="topAligned">
				<costa:selectOneMenu id="supplier" label="#{messages.supplier}" converter="#{supplierConverter}" value="#{purchaseTicketHome.entity.supplier}" valueList="#{supplierConverter.list}" itemLabel="name" />
				<costa:inputTextarea id="deliveryAddress" value="#{purchaseTicketHome.entity.deliveryAddress}" label="#{messages.deliveryAddress}" rows="5" cols="60"/>
			</h:panelGrid>
			
			<h:commandButton action="#{purchaseTicketHome.addPurchaseItem}" value="#{messages.add}">
				<f:param name="cid" value="#{javax.enterprise.context.conversation.id}" />
			</h:commandButton>
			<costa:status />
			
			<rich:dataTable id="purchaseItemTable" var="purchaseItem" value="#{purchaseTicketHome.entity.purchaseItems}">
				<rich:column>
					<f:facet name="header">#{messages.product}</f:facet>
					<rich:select value="#{purchaseItem.product}" converter="#{productConverter}" enableManualInput="true" defaultLabel="#{message.product}">
						<f:selectItems value="#{productConverter.list}" var="product" itemLabel="#{product.name}" itemValue="#{product}"/>
						<f:ajax event="change" render="color" />
					</rich:select>
				</rich:column>
				<rich:column>
					<f:facet name="header">#{messages.color}</f:facet>
					<rich:select id="color" value="#{purchaseItem.color}" converter="#{colorConverter}" enableManualInput="true" defaultLabel="#{message.color}">
						<f:selectItems value="#{purchaseItem.product.colors}" var="color" itemLabel="#{color.name}" itemValue="#{color}"/>
					</rich:select>
				</rich:column>
				<rich:column>
					<f:facet name="header">#{messages.quantity}</f:facet>
					<rich:inputNumberSpinner value="#{purchaseItem.priceDetail.quantity}">
						<a4j:ajax event="change" render="totalPrice" />
					</rich:inputNumberSpinner>
				</rich:column>
				<rich:column>
					<f:facet name="header">#{messages['unit.price']}</f:facet>
					<h:inputText value="#{purchaseItem.priceDetail.unitPrice}">
						<f:convertNumber currencySymbol="￥" maxFractionDigits="2" />
						<a4j:ajax event="change" render="totalPrice" />
					</h:inputText>
				</rich:column>
				<rich:column>
					<f:facet name="header">#{messages['total.price']}</f:facet>
					<h:outputText id="totalPrice" value="#{purchaseItem.priceDetail.totalPrice}">
						<f:convertNumber currencySymbol="￥" maxFractionDigits="2" />
					</h:outputText>
				</rich:column>
			</rich:dataTable>
		</h:form>
	</ui:define>
</ui:composition>
